<template>
    <div class="goodsDetail clearfix">
        <headerInfo @loginOut="loginOut"></HeaderInfo>
        <searchBar @gotoMainPage='gotoMainPage' 
        :goods_count="myCarCount"
        @searchGoods="searchGoodsName"
        @gotoMyShoppingCar='gotoMyShoppingCar'></SearchBar>
        <navBar :isEnableSpan="true"></navBar>
        <div class="breadcrumb">
            <a href="#">全部分类 </a>
            <span> > </span>
            <a href="#">新鲜水果</a>
            <span> > </span>
            <a href="#">商品详情</a>
        </div>
        <div class="goodsCon clearfix">
            <div class="goodsIconImg">
                <img :style="{width:'100%',height:'100%'}" :src="goods.icon">
            </div>
            <div class="goodsInfo">
                <h3>{{goods.name}}</h3>
                <p>{{goods.description}} </p>
                <div class="price_bar">
                    <span class="unitSymbol">￥
                    <em>{{(parseFloat(goods.price) / 100.0).toFixed(2)}}</em>
                    </span>
                    <span class="show_unit">单位:{{goods.unit}}</span>
                </div>
                <div class="otherSKU">
                    <el-tag class="otherSkuTag"
                     v-for="(item, index) in goods.skuList" 
                     :key="index" 
                     type="success" 
                     effect="plain" 
                     @click="skuTakClick(item)"
                     :style="{'margin-left': index == 0 ? '0px' : '20px'}">
                     {{item}}
                    </el-tag>
                </div>
                <div class="goods_num">
                    <span>数量：</span>
                    <el-input-number v-model="num" @change="handleChangeGoodsNum" :min="1" :max=goods.count></el-input-number>
                    <label>总价：</label>
                    <em>{{ (parseFloat((goods.price * this.num)) / 100.0).toFixed(2) }} 元</em>
                    <button class="addToShoppingCarBtn" 
                    type="button" 
                    @mouseover="mouseover()" 
                    @mouseout="mouseout()"
                    :style="{'background-color':this.addToShoppingCarBtnBackColor}">加入购物车 </button>
                </div>
            </div>
        </div>
        <div class="main_wrap">
            <div class="new_goods">
                <h3>新品推荐</h3>
                <ul>
                    <li v-for="(item, index) in goods.newGoodsList" :key="index">
                        <div class="newGoodsList">
                            <el-image class="newGoodsIcon" :src="item.icon" :fit="'cover'"></el-image>
                            <h2>{{item.name}}</h2>
                            <h4>￥{{(parseFloat(item.price) / 100.0).toFixed(2)}}</h4>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right_wrap">
                <div class="goodsRelatedTitle clearfix">
                    <button :style="{'border-top': this.isleftButton ? '1px solid #37ab40':'1px solid #ededed',
                    'border-left': this.isleftButton ? '1px solid #37ab40':' 1px solid #ededed',
                    'border-right': this.isleftButton ? '1px solid #37ab40':'1px solid #ededed',
                    'border-bottom': this.isleftButton ? '1px solid #ffffff':'1px solid #37ab40'}"
                    @click=right_wrapBtnClick(true)>
                        商品详情
                    </button>
                    <button :style="{'border-top': this.isleftButton ? '1px solid #ededed':'1px solid #37ab40',
                    'border-left': this.isleftButton ? '1px solid #ffffff':'1px solid #37ab40',
                    'border-right': this.isleftButton ? '1px solid #ededed':'1px solid #37ab40',
                    'border-bottom': this.isleftButton ? '1px solid #37ab40':'1px solid #ffffff'}"
                    @click=right_wrapBtnClick(false)>
                        评论
                    </button>
                    <div class="greenLine"></div>
                </div>
                <div class="relatedCon">

                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import router from '../router'
import searchBar from '../components/mainPage/SearchBar.vue'
import navBar from '../components/mainPage/NavBar.vue'

export default {
    name:'goodsDetail',
    data(){
        return {
            'goodId':2,
            'classId':2,
            'myCarCount':0, 
            'goods':Object,
            'num':1,
            'addToShoppingCarBtnBackColor':'#ff3e3e',
            'isleftButton':true,
        }
    },
    methods:{
        right_wrapBtnClick(isLeftBtn){
            this.isleftButton = isLeftBtn;
            console.log("isleftButton:",this.isleftButton);
        },
        gotoMainPage:function(){
            console.log("gotoMainPage")
            router.push({name:"Main"})
        },
        searchGoodsName: function(goods_Name){
            console.log("searchGoods:",goods_Name);
        },
        gotoMyShoppingCar(){
            console.log("gotoMyShoppingCar12");
        },
        loginOut(){
            this.$store.commit('setIsLogin',false);
            this.isLogin = this.$store.state.isLogin;
            router.push({name:'Login'});
        },
        handleChangeGoodsNum(value){
            console.log("value:",value,"this.num:",this.num);
        },
        skuTakClick(value){
            console.log("tagItem:",value);
        },
        mouseover(){
            this.addToShoppingCarBtnBackColor = '#ff3e3e70'
        },
        mouseout(){
            this.addToShoppingCarBtnBackColor = '#ff3e3e';
        }
    },
    created(){
        this.goodId = this.$route.params.id
        this.classId = this.$route.params.classId
        this.goods = {"icon":"http://image-python.itheima.net/group1/M00/00/01/rBAAlV5Gi-WAQegzAAAjjiYTEkw1557358",
                      "name":"葡萄",
                      "price":"3990",
                      "unit":"500g",
                      "count":100,
                      "skuList":[
                          "盒装葡萄",
                          "特价葡萄",
                          "抢购葡萄"
                      ],
                      "newGoodsList":[{
                          "icon":"http://image-python.itheima.net/group1/M00/00/01/rBAAlV5GjAaAQNhcAAAeuLYy0pU0322142",
                          "name":"奇异果",
                          "price":"1999",
                          },{
                          "icon":"http://image-python.itheima.net/group1/M00/00/01/rBAAlV5Gi_KAPLkHAAAgnaeGwNQ8809368",
                          "name":"柠檬",
                          "price":"999",
                          },
                      ],
                      "description":"葡萄（学名：Vitis vinifera L.）为葡萄科葡萄属木质藤本植物，小枝圆柱形，有纵棱纹，\
                      无毛或被稀疏柔毛，叶卵圆形，圆锥花序密集或疏散，基部分枝发达，果实球形或椭圆形，花期4-5月，果期8-9月。\
葡萄是世界最古老的果树树种之一，葡萄的植物化石发现于第三纪地层中，说明当时已遍布于欧、亚及格陵兰。 [1]  \
葡萄原产亚洲西部，世界各地均有栽培， [2]  世界各地的葡萄约95%集中分布在北半球。 [3] \
葡萄为著名水果，生食或制葡萄干，并酿酒，酿酒后的酒脚可提酒石酸，根和藤药用能止呕、安胎。 [2] \
葡萄（学名：Vitis vinifera L.）为葡萄科葡萄属木质藤本植物，小枝圆柱形，有纵棱纹，无毛或被稀疏\
柔毛，叶卵圆形，圆锥花序密集或疏散，基部分枝发达，果实球形或椭圆形，花期4-5月，果期8-9月。葡萄是\
世界最古老的果树树种之一，葡萄的植物化石发现于第三纪地层中，说明当时已遍布于欧、亚及格陵兰。 [1]\
 葡萄原产亚洲西部，世界各地均有栽培， [2] 世界各地的葡萄约95%集中分布在北半球。 [3] \
 葡萄为著名水果，生食或制葡萄干，并酿酒，酿酒后的酒脚可提酒石酸，根和藤药用能止呕、安胎。 [2]"}
        console.log("this.$router.params:",this.$route.params);
    },
    components:{
        searchBar,
        navBar
    }
}
</script>

<style>

.greenLine{
    background-color:#37ab40;
    height:1px;
    margin-left: 200px;
    margin-top: 39px;
}

.goodsRelatedTitle{
    height:40px;
    /* border-bottom:1px solid #37ab40 */
}

.goodsRelatedTitle button{
    float: left;
    height:40px;
    line-height: 40px;
    width:100px;
    text-align: center;
    /* border-top: 1px solid #37ab40;
    border-left: 1px solid #37ab40;
    border-bottom: 1px solid white;
    border-right: 1px solid #37ab40; */
    background-color:#faf8f8;
    cursor: pointer;
}

.newGoodsList{
    width:200px;
    height: 232px;
    border-bottom: 1px solid #ededed;
}

.newGoodsList .newGoodsIcon{
    width:150px;
    height:150px;
    margin-left:25px;
}

.newGoodsList h2{
    text-align:center;
}

.newGoodsList h4{
    color: #ff3e3e;
    font-size: 20px;
    text-align:center;
    margin-top: 5px;
}

.right_wrap{
    float: right;
    height:500px;
    width: 980px;
    border: 1px solid #ededed;
}

.new_goods{
    width:200px;
    height: 500px;
    float: left;
    border: 1px solid #ededed;
    border-top: 2px solid #37ab40;
}

.new_goods h3{
    height: 35px;
    line-height: 33px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #ededed;
    font-size: 14px;
    font-weight: normal;
    text-indent: 10px;
}

.main_wrap{
    height: 500px;
    width: 1200px;
    margin-left: 250px;
    margin-right: 250px;
    margin-top: 20px;
}

.goodsDetail{
    background-color:white;
    text-align: left;
}

.goodsCon{
    border: 1px solid #ededed;
    height: 400px;
    width: 1200px;
    margin-left: 250px;
    margin-right: 250px;
}

.goodsInfo{
    float:left;
    margin-left: 30px;
    height: 400px;
    width: 800px;
}

.goodsInfo h3{
    font-size:24px;
    line-height: 24px;
    font-weight: normal;
    color: #666;
    margin-top: 20px;
}

.goodsInfo p{
    max-height: 70px;
    margin-top: 20px;
    font-size:13px;
    overflow:hidden;
}

.price_bar{
    height:70px;
    background-color: #fff5f5;
    width:780px;
    margin-top: 20px;
    color: #ff3e3e;
    padding-top: 10px;
    padding-left: 20px;
}

.price_bar .unitSymbol{
   font-size:20px;
}

.price_bar em {
    font-size:36px;
}

.price_bar .show_unit{
    color:#666;
    font-size: 12px;
    padding-left: 250px;
}

.goods_num{
    margin-top: 20px;
}

.goods_num span{
    font-size: 16px;
    color: #666
}

.goods_num label {
    margin-left: 160px;
}
.goods_num em {
    font-size: 20px;
    color: #ff3e3e;
    font-weight: bold;
}

.otherSkuTag{
    margin-top: 20px;
    cursor: pointer;
}

.addToShoppingCarBtn{
    color: white;
    float:right;
    border-radius:4px;
    border:0px;
    height:40px;
    width: 120px;
    font-size: 16px;
    cursor: pointer;
}

.goodsIconImg{
    float: left;
    width:350px;
    height:350px;
    margin-top: 25px;
}

.breadcrumb{
    height: 40px;
    margin-left: 250px;
    margin-right: 250px;
}

.breadcrumb span{
    line-height: 40px;
    margin-left: 10px;
    margin-right: 10px;
}

.breadcrumb a{
    font-size: 12px;
    line-height: 40px;
    color: #37ab40;
}
</style>